<!--
 * @Author: lmk
 * @Date: 2022-04-16 16:06:09
 * @LastEditTime: 2022-04-28 21:31:42
 * @LastEditors: lmk
 * @Description: 
-->
<template>
  <div class="page-title">
    <span @click="homepage" class="homepage cursor-pointer">{{$t('common.homepage')}} ></span>
    <span class="title">{{$t(title)}}</span>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
export default {
  setup(){
    const route = useRouter()
    const {path} = route.currentRoute.value
    const title = `common./${path.split('/')[1]}`
    const homepage = () => {
      route.push('/')
    }
    return {
      title,homepage
    }
  }
}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 1400px) {
  .page-title {
    height: 40px;
    padding: 0 80px;
    line-height: 40px;
    font-size: 24px;
    .title{
      margin-left: 5px;
    }
  }
}
@media screen and (max-width: 1401px) {
  .page-title {
    height: 30px;
    padding: 0 30px;
    line-height: 30px;
    font-size: 14px;
    .title{
      margin-left: 5px;
    }
  }
}
.page-title {
  background: #707070;
  font-weight: bold;
  color: white;
  .title{
    color: $activeTxt;
  }
}
</style>